<template>
  <div class="only-vip">
    <el-row :gutter="20" class="p-20 pb-0">
      <el-col :span="6">
        <div class="bg-purple bc-w-r">
          <div class="p-12">
            <el-button type="primary" class="ov-float-right bt-select" @click="drawer = true">
              <i class="el-icon-search" />
              Find</el-button>
            <el-button type="primary" class="ov-float-right bt-select" @click="exportExcel('店铺排行')">
              <i class="el-icon-tickets" />
              Export</el-button>
            <el-drawer
              :visible.sync="drawer"
              direction="rtl"
            >
              <ul class="nav-ul">
                <li>
                  <h5 class="tc-menu-title ptb-15">指定时间段内销售额趋势</h5>
                  <el-date-picker
                    v-model="timeBefore"
                    type="datetime"
                    placeholder="开始时间"
                  />
                  <hr>
                  <el-date-picker
                    v-model="timeAfter"
                    type="datetime"
                    placeholder="结束时间"
                  />
                </li>
                <li>
                  <h5 class="tc-menu-title ptb-15">指定卷烟名称</h5>
                  <el-select
                    v-model="commodityQrline"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in Smoke_name_options"
                      :key="item.numberShop"
                      :label="item.nameShop"
                      :value="item.numberShop"
                    />
                  </el-select></li>
                <li>
                  <h5 class="tc-menu-title ptb-15">终端类型</h5>
                  <el-select v-model="AppTypeValue" placeholder="请选择" class="Shop_section_div_crad_input_width">
                    <el-option
                      v-for="item in AppTypeValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></li>
                <li>
                  <h5 class="tc-menu-title ptb-15">市场类型</h5>
                  <el-select v-model="MarketTypeValue" placeholder="请选择" class="Shop_section_div_crad_input_width">
                    <el-option
                      v-for="item in MarketTypeValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></li>
                <li>
                  <h5 class="tc-menu-title ptb-15">业态</h5>
                  <el-select v-model="JobTypeValue" placeholder="请选择" class="Shop_section_div_crad_input_width">
                    <el-option
                      v-for="item in JobTypeValueOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></li>
                <li>
                  <el-button type="primary" @click="select" style="width: 200px">
                    查询</el-button>
                </li>
              </ul>
            </el-drawer>
            <h5 class="mb-0 h5-s-1 pl-12">店铺列表</h5>
            <div class="p-20">
              <el-table
                :data="ShopTypeList"
                height="400"
                style="width: 100%"
              >
                <el-table-column
                  prop="nameShop"
                  label="名称"
                />
                <el-table-column
                  prop="numberShop"
                  label="数量"
                />
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="bg-purple bc-w-r p-12">
          <ul class="tc-menu-title ov-float-right nav-ul pr-3">
            <li @click="cxShopTimeLine(1)">Y</li>
            <li @click="cxShopTimeLine(2)">M</li>
            <li @click="cxShopTimeLine(3)">D</li>
            <li @click="cxShopTimeLine(4)">H</li>
            <li @click="cxShopTimeLine(5)">M</li>
            <li @click="cxShopTimeLine(6)">S</li>
          </ul>
          <h5 class="h5-s-1 mt-0 p-3">时间</h5>
          <div class="card-body">
            <ve-Line :data="ShopLine" :extend="lineExtend" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bg-purple bc-w-r">
          <div class="p-12">
            <el-button type="primary" class="ov-float-right bt-select" @click="exportExcel('烟类排行')">
              <i class="el-icon-tickets" />
              Export</el-button>
            <h5 class="mb-0 h5-s-1 pl-12">卷烟列表</h5>
            <div class="p-20">
              <el-table
                :data="ShopSmokeTypeList"
                height="400"
                style="width: 100%"
              >
                <el-table-column
                  prop="nameShop"
                  label="名称"
                />
                <el-table-column
                  prop="numberShop"
                  label="数量"
                />
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-20 pb-0">
      <el-col :span="6">
        <div class="bc-w-r bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              销量平均数
            </span>
            <h2 class="mb-0">{{ AverageSales }}</h2>
          </div>
          <div>
            <svg t="1606535919729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="792" width="70" height="70"><path d="M690.71 388.77c-51.956 73.454-105.703 161.838-161.242 265.152 14.333 53.15 32.547 96.447 54.643 129.89 22.096 33.442 42.4 50.164 60.913 50.164 4.18 0 8.361-0.747 12.541-2.24 4.18-1.493 8.51-4.479 12.99-8.958 4.478-4.479 9.405-10.898 14.78-19.26 5.375-8.36 11.645-19.11 18.811-32.247l9.854 8.957c-10.152 41.207-20.603 70.618-31.353 88.235-10.749 17.618-25.977 26.426-45.685 26.426-26.873 0-50.462-19.707-70.767-59.122-9.555-19.11-19.11-40.46-28.665-64.049-9.555-23.589-19.409-50.313-29.561-80.173a3664.756 3664.756 0 0 1-36.727 66.289 8214.357 8214.357 0 0 0-36.728 65.392c-7.763 14.333-14.63 25.829-20.603 34.488-5.972 8.66-11.346 15.378-16.124 20.155-8.36 7.764-21.797 11.645-40.31 11.645-17.916 0-26.874-3.583-26.874-10.749 0-2.986 2.09-6.868 6.27-11.645 26.874-35.832 53.3-75.246 79.278-118.244 25.978-42.998 50.014-85.996 72.11-128.994-18.512-63.302-37.473-112.122-56.882-146.46-19.409-34.34-38.668-51.508-57.778-51.508a24.62 24.62 0 0 0-10.302 2.239c-3.284 1.493-6.867 4.628-10.75 9.406-3.88 4.777-8.36 11.346-13.436 19.707-5.076 8.36-11.197 19.11-18.364 32.248L310 475.661c7.764-26.277 14.482-47.029 20.155-62.257 5.674-15.229 11.198-26.575 16.572-34.04 5.375-7.465 11.198-12.392 17.468-14.78 6.27-2.39 14.482-3.584 24.634-3.584 13.139 0 25.082 5.375 35.832 16.124 5.375 6.57 11.496 15.826 18.363 27.77 6.868 11.943 13.885 26.276 21.051 42.997 7.167 17.319 14.482 36.877 21.947 58.674 7.465 21.798 15.08 46.432 22.843 73.903 21.499-38.818 39.564-71.066 54.195-96.745 14.631-25.68 25.828-45.387 33.592-59.122 8.36-13.736 15.228-24.933 20.603-33.592 5.375-8.66 9.555-13.885 12.541-15.676 7.166-5.972 19.409-8.958 36.727-8.958 19.11 0 28.665 3.583 28.665 10.75 0 3.582-1.492 7.464-4.478 11.644zM284 254.875h456c19.33 0 35-15.67 35-35s-15.67-35-35-35H284c-19.33 0-35 15.67-35 35s15.67 35 35 35z" fill="#40c9c6" p-id="793" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bc-w-r bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              会员销售总计
            </span>
            <h2 class="mb-0">{{ AllPeople_number }}</h2>
          </div>
          <div>
            <svg t="1606542737784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1741" width="70" height="70"><path d="M490.5 523.7c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6l107.4-71.6c7.1-4.8 16.8-2.8 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6l-107.4 71.6c-2.7 1.8-5.7 2.6-8.6 2.6zM404.3 466.3c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6L557 330.2c7.1-4.8 16.8-2.9 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6L412.9 463.7c-2.6 1.8-5.6 2.6-8.6 2.6zM318.2 408.9c-5 0-10-2.4-13-6.9-4.8-7.2-2.8-16.8 4.3-21.6l215.4-143.6c7.1-4.8 16.8-2.8 21.6 4.3s2.8 16.8-4.3 21.6L326.8 406.3c-2.7 1.7-5.7 2.6-8.6 2.6z" p-id="1742" fill="#36a3f7" /><path d="M852.2 357.4L533.6 144.9c-12.3-8.2-30.9-8.2-43.2 0L171.8 357.4c-7.8 5.2-12.3 13.1-12.3 21.6s4.5 16.4 12.3 21.6L490.4 613c6.2 4.1 13.9 6.1 21.6 6.1 7.7 0 15.5-2 21.6-6.1l318.6-212.4c7.8-5.2 12.3-13.1 12.3-21.6s-4.4-16.4-12.3-21.6zM516.4 587.1c-2 1.3-6.8 1.3-8.7 0L195.5 379l312.1-208.2c1.9-1.3 6.8-1.3 8.7 0l312.2 208.1-312.1 208.2zM835 383.3l8.6-13-8.6 13z" p-id="1743" fill="#36a3f7" /><path d="M512 752.2c-7.7 0-15.5-2-21.6-6.2L171.8 533.6c-7.2-4.8-9.1-14.4-4.3-21.6 4.8-7.2 14.4-9.1 21.6-4.3l318.6 212.4c2 1.3 6.7 1.3 8.7 0L835 507.8c7.1-4.8 16.8-2.8 21.6 4.3 4.8 7.2 2.8 16.8-4.3 21.6L533.6 746.1c-6.1 4.1-13.9 6.1-21.6 6.1z" p-id="1744" fill="#36a3f7" /><path d="M512 885.3c-7.7 0-15.5-2-21.6-6.2L171.8 666.7c-7.2-4.8-9.1-14.4-4.3-21.6s14.4-9.1 21.6-4.3l318.6 212.4c2 1.3 6.7 1.3 8.7 0L835 640.8c7.1-4.8 16.8-2.9 21.6 4.3s2.8 16.8-4.3 21.6L533.6 879.1c-6.1 4.1-13.9 6.2-21.6 6.2z" p-id="1745" fill="#36a3f7" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bc-w-r bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              范围
            </span>
            <h2 class="mb-0">{{ FirstLast }}</h2>
          </div>
          <div>
            <svg t="1606542781975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2639" width="70" height="70"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26c-54 0-106.4 10.6-155.7 31.4-47.6 20.1-90.4 49-127.1 85.7-36.7 36.7-65.6 79.5-85.7 127.1C82.6 445.6 72 498 72 552c0 54 10.6 106.4 31.4 155.7 20.1 47.6 49 90.4 85.7 127.1 36.7 36.7 79.5 65.6 127.1 85.7C365.6 941.4 418 952 472 952c54 0 106.4-10.6 155.7-31.4 47.6-20.1 90.4-49 127.1-85.7 36.7-36.7 65.6-79.5 85.7-127.1C861.4 658.4 872 606 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8c-62.6 62.1-147.1 96.6-235.3 96.2-88.1-0.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8z" p-id="2640" fill="#ffbe0b" /><path d="M952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6-65.8-65.7-152.8-106.5-245.2-115L560.7 72c-4.7-0.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6z m-332.2-58.2V147.6c62.6 13.1 120.7 44.2 166.4 89.8 45.7 45.6 77 103.6 90 166.1l-256.4 0.7z" p-id="2641" fill="#ffbe0b" /></svg>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="bc-w-r bg-purple display-flex-row p-3">
          <div class="flex-1">
            <span class="test-container-menu-span">
              第一卷烟与总卷烟之比
            </span>
            <h2 class="mb-0">{{ fristAllPro }}%</h2>
          </div>
          <div>
            <svg t="1606542781975" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2639" width="70" height="70"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26c-54 0-106.4 10.6-155.7 31.4-47.6 20.1-90.4 49-127.1 85.7-36.7 36.7-65.6 79.5-85.7 127.1C82.6 445.6 72 498 72 552c0 54 10.6 106.4 31.4 155.7 20.1 47.6 49 90.4 85.7 127.1 36.7 36.7 79.5 65.6 127.1 85.7C365.6 941.4 418 952 472 952c54 0 106.4-10.6 155.7-31.4 47.6-20.1 90.4-49 127.1-85.7 36.7-36.7 65.6-79.5 85.7-127.1C861.4 658.4 872 606 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8c-62.6 62.1-147.1 96.6-235.3 96.2-88.1-0.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8z" p-id="2640" fill="#f4516c" /><path d="M952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6-65.8-65.7-152.8-106.5-245.2-115L560.7 72c-4.7-0.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6z m-332.2-58.2V147.6c62.6 13.1 120.7 44.2 166.4 89.8 45.7 45.6 77 103.6 90 166.1l-256.4 0.7z" p-id="2641" fill="#f4516c" /></svg>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    this.lineExtend = {
      series: {
        symbol: 'none',
        lineStyle: {
          color: '#43D39E'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(217, 246, 236, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(217, 246, 236, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        markPoint: {
          data: [{
            type: 'max'
          },
          {
            type: 'min'
          }]
        }
      },
      dataZoom: [{
        start: 0,
        end: 100,
        type: 'inside',
        show: true
      }],
      xAxis: [{
        axisLine: {
          show: false
        },
        data: {
          textStyle: {
            color: 'red'
          }
        }
      }],
      yAxis: [{
        axisLine: {
          show: false
        }
      }]
    }
    return {
      drawer: false,
      timeBefore: '',
      timeAfter: '',
      commodityQrline: '',
      Smoke_name_options: [],
      AppTypeValue: '精品店',
      MarketTypeValue: '乡村',
      JobTypeValue: '食杂店',
      AppTypeValueOptions: [{
        value: '精品店',
        label: '精品店'
      }, {
        value: '标准店',
        label: '标准店'
      }, {
        value: '普通店',
        label: '普通店'
      }, {
        value: '未标明类型',
        label: ''
      }, {
        value: '全部类型',
        label: '全部类型'
      }],
      MarketTypeValueOptions: [{
        value: '乡村',
        label: '乡村'
      }, {
        value: '城镇',
        label: '城镇'
      }, {
        value: '未标明类型',
        label: ''
      }, {
        value: '全部类型',
        label: '全部类型'
      }],
      JobTypeValueOptions: [{
        value: '食杂店',
        label: '食杂店'
      }, {
        value: '烟酒商店',
        label: '烟酒商店'
      }, {
        value: '商场',
        label: '商场'
      }, {
        value: '未标明类型',
        label: ''
      }, {
        value: '全部类型',
        label: '全部类型'
      },
      {
        value: '其他',
        label: '其他'
      }],
      ShopTypeList: [],
      ShopSmokeTypeList: [],
      ShopLine: {
        columns: ['nameShop', 'numberShop'],
        rows: []
      },
      AverageSales: 0,
      FirstLast: 0,
      AllPeople_number: 0,
      fristAllPro: 0
    }
  },
  created() {
    this.Select_Smoke_defult_name()
  },
  methods: {
    time_String(date) {
      var year = date.getFullYear()
      var month = (date.getMonth() + 1).toString()
      var day = (date.getDate()).toString()
      if (month.length === 1) {
        month = '0' + month
      }
      if (day.length === 1) {
        day = '0' + day
      }
      var hours = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      // eslint-disable-next-line no-unused-vars
      return year + month + day + hours + m + s
    },
    select() {
      var data = new URLSearchParams()
      data.append('AppTypeValue', this.AppTypeValue)
      data.append('MarketTypeValue', this.MarketTypeValue)
      data.append('JobTypeValue', this.JobTypeValue)
      data.append('time_before', this.time_String(this.timeBefore))
      data.append('time_after', this.time_String(this.timeAfter))
      data.append('Smoke_name', this.commodityQrline)
      data.append('SmokeCommodityQrline', this.commodityQrline)
      this.$axios.post(`shop/ShopSmokeType`, data)
        .then(res => {
          var data = res.data
          this.ShopTypeList = data
          var sum = 0.0
          // eslint-disable-next-line no-unused-vars
          var first = 0.0
          // eslint-disable-next-line no-unused-vars
          var last = 0.0
          first = parseFloat(data[0].numberShop)
          last = parseFloat(data[data.length - 1].numberShop)
          for (var i in res.data) {
            sum = sum + parseFloat(data[i].numberShop)
          }
          this.FirstLast = first - last
          this.AverageSales = (sum / data.length).toFixed(2)
          this.AllPeople_number = sum
          this.drawer = false
        })
      this.$axios.post(`shop/ShopAndSmokeName`, data)
        .then(res => {
          var sum = 0
          for (var i in res.data) {
            sum = sum + parseFloat(res.data[i].numberShop)
          }
          this.fristAllPro = (parseFloat(res.data[0].numberShop) / sum).toFixed(2) * 100
          this.ShopSmokeTypeList = res.data
        })
      this.cxShopTimeLine(1)
    },
    cxShopTimeLine: function(i) {
      var data = new URLSearchParams()
      data.append('AppTypeValue', this.AppTypeValue)
      data.append('MarketTypeValue', this.MarketTypeValue)
      data.append('JobTypeValue', this.JobTypeValue)
      data.append('time_before', this.time_String(this.timeBefore))
      data.append('time_after', this.time_String(this.timeAfter))
      data.append('SmokeCommodityQrline', this.commodityQrline)
      data.append('Smoke_name', this.commodityQrline)
      data.append('VeLineId', i)
      this.$axios.post(`shop/ShopSmokeVeLine`, data)
        .then(res => {
          this.ShopLine.rows = res.data
        })
    },
    exportExcel(i) {
      require.ensure([], () => {
        console.log('dada')
        // eslint-disable-next-line camelcase
        const { export_json_to_excel } = require('@/vendor/Export2Excel.js')// 注意这个Export2Excel路径
        const tHeader = ['品种', '数量'] // 上面设置Excel的表格第一行的标题
        const filterVal = ['nameShop', 'numberShop'] // 上面的index、nickName、name是tableData里对象的属性key值

        if (i === '烟类排行') {
          var list = this.ShopSmokeTypeList // 把要导出的数据tableData存到list
          var data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '烟类排行')// 最后一个是表名字
        } else {
          list = this.ShopTypeList // 把要导出的数据tableData存到list
          data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '店铺排行')// 最后一个是表名字
        }
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    Select_Smoke_defult_name: function() {
      this.$axios.post(`shop/SmokeAllName`)
        .then(res => {
          this.Smoke_name_options = res.data
          this.Smoke_name_options.push({ 'nameShop': '全部香烟', 'numberShop': '全部香烟' })
        })
    }
  }
}
</script>

<style scoped>
  .only-vip{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size:  1rem;
    font-weight: 400;
    color: #2e3136;
    background-color: rgb(240, 242, 245);
  }
  .only-vip h1,h2,h3,h4,h5,h6,h7{
    margin: 10px 0px 0px;
    font-weight: 600;
    font-family: "Nunito Sans",sans-serif;
    display: block;
  }
  .ov-float-right{
    float: right;
  }
  .only-vip ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .bt-select{
    margin: 9px;
    padding: 6px 10px;
    background-color: #5369f8;
    font-size: .76562rem;
  }
  .h5-s-1{
    font-size: 1.04rem;
  }
  .p-20{
    padding: 20px;
  }
  .pl-12{
    padding-left: 12px;
  }
  .p-12{
    padding: 12px;
  }
  .bc-w-r{
    background-color: white;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    -moz-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
  }
  .nav-ul{
    display: flex;
    flex-wrap: wrap;
  }
  .nav-ul li{
    color: #6c757d;
    padding: .5rem 1rem;
  }
  .mb-24{
    margin-bottom: 24px;
  }
  .mb-0{
    margin-bottom: 0;
  }
  .display-flex-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .tc-menu-title{
    font-size: 1.04rem;
  }
  .mt-0{
    margin-top: 0px;
  }
  .p-3{
    padding: 1rem;
  }
  .pr-3{
    padding-right: 1rem;
  }
  .card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
  }
  .nav-ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }
  .nav-ul li{
    color: #6c757d;
    padding: .5rem 1rem;
  }
  .pb-0{
    padding-bottom: 0;
  }
  .test-container-menu-span{
    font-size: 12px;
    color: #6c757d;
    font-weight: 700;
  }
  .el-table{
    font-size: 12px !important;
  }

</style>
